body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
  }
  
  h2 {
    font-family: Helvetica;
    font-size: 36px;
    margin-top: 40px;
    color: #333;
    opacity: 0;
  }
  
  input[type="checkbox"]:checked ~ h2 {
    animation: .6s title ease-in-out;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
  }
  
  .circle {
    stroke-dasharray: 1194;
    stroke-dashoffset: 1194;
  }
  
  input[type="checkbox"]:checked + svg .circle {
    animation: circle 1s ease-in-out;
    animation-fill-mode: forwards;
  }
  
  .tick {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
  }
  
  input[type="checkbox"]:checked + svg .tick {
    animation: tick .8s ease-out;
    animation-fill-mode: forwards;
    animation-delay: .95s;
  }
  
  @keyframes circle {
    from {
      stroke-dashoffset: 1194;
    }
    to {
      stroke-dashoffset: 2388;
    }
  }
  
  @keyframes tick {
    from {
      stroke-dashoffset: 350;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes title {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }